<template>

	<button @click="modalOpen = true">
		Open full screen modal! (With teleport!)
	</button>
	<div>teleport实现弹窗元素挂载到body标签下</div>
	<teleport to="body">
		<div v-if="modalOpen" class="modal">
			<div class="modalDialog">
				I'm a teleported modal!
				(My parent is "body")
				<button @click="modalOpen = false">
					Close
				</button>
			</div>
		</div>
	</teleport>
</template>

<script>
	import {
		ref
	} from 'vue'
	export default {
		name: 'ModalButton',
		setup: () => {
			var modalOpen = ref(false)
			return {
				modalOpen,
			}
		},
		data() {
			return {
				count: 0,
			}
		},

		created() {},
		mounted() {
			console.log('ModalButton=mounted=')
			this.$emit('childMounted')
		},
		methods: {
			handleOnline() {
				console.log('handleOnline=')
			},
		},
	}
</script>

<style>
	.modal {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .5);

	}

	.modalDialog {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 200px;
		height: 100px;
		background-color: green;
	}
</style>
